<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>hiops</title>
    <meta name="keywords" content="hiops">
    <meta name="description" content="hiops">
    <link href="/static/packages/layui/css/layui.css">
</head>

<body>
<div class="layui-row">
    <div class="layui-col-md4">
        你的内容 9/12332nadsf
    </div>
    <div class="layui-col-md8">
        你的内容 3/12
    </div>
</div>
<script th:src="@{/jquery/jquery.min.js?v=3.6.0}"></script>
<script th:src="@{/layui/layui.js?v=2.6.8}"></script>

<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>